<template>
  <div class="home">
    <!-- 准备二级路由坑 -->
    <!-- <router-view></router-view> -->
    <!-- 存放searchPopup.vue组件 -->
    <router-view v-if="$route.path == '/home/searchPop'"></router-view>
    <div v-else>
      <!-- 搜索栏 -->
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        @click="$router.push('/home/searchPop')"
      />
      <!-- 轮播图 -->
      <swipe :images="images"></swipe>
      <!-- 图标导航 -->
      <grid :channelArr="channelArr"></grid>
      <!-- 品牌制造商直供 -->
      <productList :brandList="brandList"></productList>
      <!-- 新品首发 -->
      <newList :goodlist="newGoodsList" mytitle="周一到周四新品首发"></newList>
      <!-- 人气推荐组件 -->
      <top :arr="hotGoodsList"></top>
      <!-- 专题组件 -->
      <zhuanti :topicList="topicList"></zhuanti>
      <!-- 分类数据 -->
      <div v-for="item in categoryList" :key="item.id">
        <fenlei :goodList="item.goodsList" :title="item.name"></fenlei>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getIndexList } from "../https/http";
import { Toast } from "vant";
import swipe from "../components/swipe.vue";
// 引入图标导航组件
import grid from "@/components/grid";
// 引入品牌制造商直供组件
import productList from "@/components/productList";
// 引入新品首发组件
import newList from "@/components/newList";
// 引入人气推荐组件
import top from "@/components/top.vue";
// 引入专题组件
import zhuanti from "@/components/zhuanti.vue";
// 引入分类组件
import fenlei from "@/components/fenlei.vue";
// 引入搜索页组件
import searchPop from "@/views/searchPop.vue";
export default {
  name: "home",
  data() {
    return {
      value: "",
      //轮播图数据
      images: [],
      channelArr: [], //图标导航数组
      brandList: [], // 品牌制造商直供数组
      newGoodsList: [], //周一到周四
      hotGoodsList: [], //人气推荐
      topicList: [], //专题精选
      categoryList: [], //分类
    };
  },
  created() {
    getIndexList().then((res) => {
      console.log(res.data.brandList);
      // 轮播图数据
      this.images = res.data.banner;
      // 图标导航数据
      this.channelArr = res.data.channel;
      // 品牌数据
      this.brandList = res.data.brandList;
      // 产品列表
      this.newGoodsList = res.data.newGoodsList;
      // 人气推荐
      this.hotGoodsList = res.data.hotGoodsList;
      // 专题精选
      this.topicList = res.data.topicList;
      // 分类
      this.categoryList = res.data.categoryList;
      console.log(this.categoryList);
    });
  },
  components: {
    swipe,
    grid,
    productList,
    newList,
    top,
    zhuanti,
    fenlei,
    searchPop,
  },
  methods: {},
};
</script>
<style lang="less">
</style>

